@function ws($px) { 
	@return ($px * 2 )+upx;
}

$color:#fff;
$main-color: #2A89F8;
$shaow-bottom: 0 ws(2) ws(5) 0 rgba(7, 17, 27, 0.11);




@mixin line {
	position: absolute;
	right: 0;
	left: 0;
	height: 1upx;
	content: '';
	transition: .35s all;
	transform: scaleY(.5);
}

@mixin one-line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@mixin border-line($color, $direction) {
	position: relative;
	transform-style: preserve-3d;
	&::after {
		@include line;
		background-color: $color;
		@if $direction==top {
			top: 0;
		}
		@else {
			bottom: 0;
		}
	}
}




.loading-warpper {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #fff;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	.loading {
		min-width: ws(60);
		min-height: ws(60);
		position: relative;
		.item1,
		.item2 {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: $main-color;
			opacity: .6;
			position: absolute;
			top: 0;
			left: 0;
			animation: bounce 2s infinite ease-in-out;
		}
		.item2 {
			animation-delay: -1s;
		}
	}
}

@keyframes bounce {
	0%,
	100% {
		transform: scale(0);
	}
	50% {
		transform: scale(1);
	}
}
